<template>
    <div class="main">
        <div class="top"  @mousedown="startDrag">
            <div class="top__left">
                <img class="top__logo" src="../../assets/logo-top.png">
                <svg @click="back()" class="top__back-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M710.153924 8.980397L266.007127 460.692524a81.118646 81.118646 0 0 0 0.861532 114.476097l446.192936 441.050666a26.922883 26.922883 0 0 0 37.853573-38.284339L304.722232 536.884282a27.27288 27.27288 0 0 1-0.323074-38.445877L748.545955 46.726278A26.922883 26.922883 0 1 0 710.180847 9.00732z"
                        fill="#ffffff" />
                </svg>
            </div>
            <div class="search">
                <div class="search-wrapper">
                    <input @click="toSearch()" v-model="searchStore.searchKeyword" class="search__input"
                        placeholder="输入想搜索的歌曲或歌手">
                </div>
            </div>
            <div class="user">
                <div @click="LoginOrISLogin()" class="user__name">{{ username }}</div>
                <el-avatar class="user__avatar" :size="50" :src="avatorUrl" />
                <el-icon @click="minniwin()" style="cursor: pointer; color: white;font-size: 30px;"><Minus /></el-icon>
                <el-icon @click="toggleMaximize()" v-if="!reloadStore.ismix" style="cursor: pointer;color: white;font-size: 30px;"><FullScreen /></el-icon>
                <el-icon @click="toggleMaximize()" v-else style="cursor: pointer;color: white;font-size: 30px;"><Crop /></el-icon>
                <el-icon @click="handleClose()" style="cursor: pointer;color: white;font-size: 30px;"><Close/></el-icon>
            </div>
        </div>
        <div class="main-body">
            <div class="left">
                <p class="recommend-title">推荐</p>
                <div class="navigation">
                    <router-link v-for="item in filteredNavItems" :key="item.path" :to="item.path" class="nav-link"
                        active-class="active">
                        <div class="nav-item">
                            <svg class="nav-icon" :viewBox="item.viewBox">
                                <path :d="item.pathD" fill="currentColor" />
                                <path v-if="item.pathD2" :d="item.pathD2" fill="currentColor" />
                            </svg>
                            <span>{{ item.text }}</span>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
            <drawe />
        </div>
        <div class="foot">
            <play-bar/>
            <song-details style="width: 100%;height: 100%;" />
        </div>
        
        <transition name="playlist">
            <play-list-details v-if="playListDetailsStore.isOpen" />
        </transition>
        <transition name="singer">
            <singer-details v-if="singerStore.isSingerOpen" />
        </transition>
        <transition name="login">
            <login v-if="loginStore.isLoginShow" />
        </transition>
    </div>
</template>

<script setup name="homepage">
import { ref, computed, watch,onMounted } from 'vue';
import router from '@/router';
import PlayBar from '@/components/playBar.vue';
import drawe from '@/components/drawe.vue';
import SongDetails from '@/components/songDetails.vue';
import SingerDetails from '@/components/SingerDetails.vue';
import PlayListDetails from '@/components/playListDetalis.vue';
import { usePlayListDetails } from '@/store/playListDetails';
import { useSingerStore } from '@/store/singer';
import { useSearchStore } from '@/store/search';
import { ElMessageBox } from 'element-plus';
import { useReloadStore } from '@/store/reload';
import { useLoginStore } from '@/store/login';
import Login from '@/views/Login/index.vue';
import config from '../../../public/config.js'

const reloadStore = useReloadStore()
const playListDetailsStore = usePlayListDetails()
const username = ref('未登录')
const user = localStorage.getItem('user')
const avatorUrl = ref(user ? `${config.downloadUrl}?name=${JSON.parse(user).avator}` : '')
const singerStore = useSingerStore()
const searchStore = useSearchStore()
const loginStore = useLoginStore()


watch([() => localStorage.getItem('token'), () => localStorage.getItem('username')], 
    ([token, storedUsername]) => {
        username.value = token && storedUsername ? storedUsername : '未登录'
    },
    { immediate: true }
)

const navItems = [
    {
        path: '/fondMusic',
        text: '发现音乐',
        viewBox: '0 0 1024 1024',
        pathD: 'M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z'
    },
    {
        path: '/songList',
        text: '歌单',
        viewBox: '0 0 1024 1024',
        pathD: 'M770.051533 313.11157869H254.83220512c-24.00821911 0-43.59774757 19.58952848-43.59774758 43.59774759v494.15690252c0 24.00821911 19.58952848 43.59774757 43.59774758 43.59774759h515.21932788c24.00821911 0 43.59774757-19.58952848 43.59774761-43.59774759V356.85661596c0-24.15550879-19.58952848-43.74503728-43.59774761-43.74503727z m15.7599966 537.75465011c0 8.69009158-7.06990501 15.75999659-15.7599966 15.75999659H254.83220512c-8.69009158 0-15.75999659-7.06990501-15.7599966-15.75999659V356.85661596c0-8.69009158 7.06990501-15.75999659 15.7599966-15.75999661h515.21932788c8.69009158 0 15.75999659 7.06990501 15.7599966 15.75999661v494.00961284zM277.22023765 255.52131075h470.29597313c7.65906378 0 13.99252034-6.1861669 13.99252032-13.99252032s-6.1861669-13.99252034-13.99252032-13.99252037H277.22023765c-7.65906378 0-13.99252034 6.1861669-13.99252034 13.99252037s6.33345658 13.99252034 13.99252034 13.99252032zM321.84901307 168.62039497h381.03842231c6.92261532 0 12.51962347-5.59700814 12.51962346-12.51962348s-5.59700814-12.51962347-12.51962346-12.51962346H321.84901307c-6.92261532 0-12.51962347 5.59700814-12.51962347 12.51962346s5.59700814 12.51962347 12.51962347 12.51962348z',
        pathD2: 'M634.10315118 451.71117489l-194.56967758 31.96186226c-3.38766283 0.58915875-5.89158752 3.5349525-5.89158751 6.92261531v173.94912129c0 13.40336159-9.72111939 24.74466755-22.9771913 26.6594335l-19.00036972 2.79850407c-16.20186565 2.35663501-28.13233036 16.34915535-28.13233037 32.55102099v3.38766281c0 20.17868721 17.96934191 35.64410444 37.85344978 32.55102102l24.89195723-3.68224219c22.97719129-3.38766283 39.9155054-23.12448098 39.91550538-46.39625166V563.35675824c0-3.5349525 2.50392469-6.48074626 5.89158751-6.92261533l129.61492527-21.20971503c4.27140094-0.73644845 8.24822251 2.65121438 8.24822251 6.92261531v94.55997958c0 13.40336159-9.72111939 24.74466755-22.97719129 26.65943349l-19.00036975 2.79850406c-16.20186565 2.35663501-28.13233036 16.34915535-28.13233035 32.55102101v3.3876628c0 20.17868721 17.96934191 35.64410444 37.85344976 32.55102103l24.89195723-3.68224221c22.97719129-3.38766283 39.9155054-23.12448098 39.9155054-46.39625166V458.63379022c-0.1472897-4.41869063-4.12411126-7.65906378-8.3955122-6.92261533z'
    },
    {
        path: '/singer',
        text: '歌手',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    },
    {
        path: '/myMusic',
        text: '我的音乐',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    }
]


const filteredNavItems = computed(() => {
    return navItems.filter(item => {
        if (item.path === '/myMusic') {
            return username.value !== '未登录'
        }
        return true
    })
})

function back() {
    router.back()
}

function toSearch() {
    router.push('/search')
}

function handleClose(){
    ElMessageBox.confirm(
    '请选择操作方式',
    '提示',
    {
      confirmButtonText: '直接退出',
      cancelButtonText: '最小化到托盘',
      distinguishCancelAndClose: true,
      type: 'warning',
    }
  )
    .then(() => {
        // 直接退出
        window.myApi.quitApp()
    })
    .catch((action) => {
        if(action === 'cancel') {
            // 最小化到托盘
            window.myApi.closeWindows()
        }
    })
}
function minniwin(){
    window.myApi.miniWindows()
}
function toggleMaximize(){
    if (window.myApi && typeof window.myApi.maximizeWindow === 'function') {
        window.myApi.maximizeWindow();
        reloadStore.ismix = !reloadStore.ismix; // 切换最大化状态
      }
}
const mouseX = ref(0)
const mouseY = ref(0)
const isDragging = ref(false)

const startDrag = (event) => {
  if (event.target.closest('.user') || event.target.closest('.search') || event.target.closest('ELMessageBox')) {
    return; // 如果点击的是用户区域或搜索区域，不进行拖动
  }
  
  if (event) {
    mouseX.value = event.clientX;
    mouseY.value = event.clientY;
    isDragging.value = true;
    
    // 添加 -webkit-app-region: no-drag 样式
    document.body.style.webkitAppRegion = 'no-drag';
    
    window.addEventListener('mousemove', onMouseMove, { passive: true });
    window.addEventListener('mouseup', onMouseUp);
  }
}

const onMouseMove = (event) => {
  if (!isDragging.value || !event) return;
  
  requestAnimationFrame(() => {
    const deltaX = event.clientX - mouseX.value;
    const deltaY = event.clientY - mouseY.value;
    
    // 获取屏幕尺寸
    const { screenX, screenY, outerWidth, outerHeight } = window;
    
    // 计算新位置
    const newX = screenX + deltaX;
    const newY = screenY + deltaY;
    
    // 边界检查
    if (newX >= 0 && 
        newY >= 0 && 
        newX + outerWidth <= screen.width && 
        newY + outerHeight <= screen.height) {
      window.myApi.moveWindow(deltaX, deltaY);
    }
    
    mouseX.value = event.clientX;
    mouseY.value = event.clientY;
  });
}

const onMouseUp = () => {
  isDragging.value = false;
  document.body.style.webkitAppRegion = 'drag';
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
}
function LoginOrISLogin(){
    if(username.value === '未登录' || !localStorage.getItem('token')){
        loginStore.isLoginShow = true
    }else{
        router.push('/myMusic')
    }
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    transition: transform 0.05s ease;
    will-change: transform;
    overflow: hidden;
}

.top {
    width: 100%;
    height: 80px;
    background-color: rgba(210, 61, 46);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px 10px 0px 0px;
    justify-content: space-between;
    -webkit-app-region: drag;
    user-select: none;
    cursor: move;
    flex-shrink: 0;
}

.top__left {
    display: flex;
    align-items: center;
}

.top__logo {
    width: 40%;
    height: 40%;
}

.top__back-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.foot {
    width: 100%;
    height: 80px;
    flex-shrink: 0;
}

.main-body {
    width: 100%;
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}

.left {
    width: 15%;
    height: 100%;
    padding: 20px 0;
    background: #fafafa;
}

.right {
    width: 85%;
    height: 100%;
}

.user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
}

.user__name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.user__avatar {
    margin-left: 10px;
    margin-right: 20px;
}

.recommend-title {
    font-size: 15px;
    font-weight: 500;
    color: #8a8a8a;
    padding: 0 20px;
    margin-bottom: 15px;
}

.nav-link {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.nav-item:hover {
    background: #f0f0f0;
}

.nav-icon {
    height: 20px;
    width: 20px;
    margin-right: 12px;
}

.active {
    color: #d23d2e;
}

.active .nav-item {
    background: #f6e5e3;
}

.active .nav-icon {
    color: #d23d2e;
}

/* From Uiverse.io by joe-watson-sbf */
.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-left: -60%;
}

.search__input {
    font-family: inherit;
    font-size: inherit;
    background-color: #f4f2f2;
    border: none;
    color: #646464;
    padding: 0.7rem 1rem;
    border-radius: 20px;
    width: 250px;
    transition: all ease-in-out .5s;
    margin-right: -2rem;
    cursor: pointer;
}

.search__input:hover,
.search__input:focus {
    box-shadow: 0 0 1em #00000013;
}

.search__input:focus {
    outline: none;
    background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
    font-weight: 100;
    color: #ccc;
}

.search__input:focus+.search__button {
    background-color: #f0eeee;
}

.search-wrapper {
    position: relative;
}

/* 防止可点击元素被拖动影响 */
.top .user,
.top .search,
.top__back-icon,
.top svg {
  -webkit-app-region: no-drag;
}
</style>
